<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="crudData.loading"
               :data="crudData.data"
               :page.sync="crudData.page"
               v-model="crudData.form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
    >
      <template slot-scope="scope" slot="menu">
        <el-button type="text" size="small" icon="el-icon-view" @click="handView(scope.row)">查看
        </el-button>
        <el-button type="text" icon="el-icon-set-up" size="small"
                   @click="itemLevel(scope.row)">业务环节
        </el-button>
      </template>
      <template slot-scope="scope" slot="materialInfoForm">
        <div v-if="crudData.materialInfoData&&crudData.materialInfoData.length>0">
          <material-info :material-info="crudData.materialInfoData"></material-info>
        </div>
        <div v-else>暂无材料</div>
      </template>
      <template slot-scope="scope" slot="processForm">
        <div v-if="crudData.processData&&crudData.processData.length>0">
          <handling-process :process-data="crudData.processData"></handling-process>
        </div>
        <div v-else>暂无材料</div>
      </template>
      <template slot="anticipateDayForm">
        <div v-if="crudData.form.anticipateDay!==''">{{ crudData.form.anticipateDay + '个工作日' }}</div>
      </template>
      <template slot="promiseDayForm">
        <div v-if="crudData.form.promiseDay!==''">{{ crudData.form.promiseDay + '个工作日' }}</div>
      </template>
      <template slot="handProcessHeaderForm" slot-scope="{column}">
        <div style="width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center">
          <div style="display: flex;align-items: center">
            <i class="el-icon-user-solid" style="font-size: 20px;margin-right: 10px"></i>
            <div style="font-size: 16px; margin-right: 20px">{{ column.label }}</div>
            <div class="links" v-if="crudData.form.flowChart&&crudData.form.flowChart!==''">
              <el-link type="primary" style="font-size: 16px" @click="openFlow(crudData.form.flowChart)">点击查看办理流程图
              </el-link>
              <i class="el-icon-arrow-right" style="color:#146ad1;font-size: 14px;"></i>
            </div>
          </div>
        </div>

      </template>
    </avue-crud>
    <el-drawer
      :visible.sync="crudData.ItemDrawer"
      size="calc(100% - 240px)"
      :modal-append-to-body="false"
      :modal="false"
      :destroy-on-close="true"
      :append-to-body="true"
    >
      <template slot="title">
        <div class="drawTitle">{{ crudData.itemTitle }}</div>
      </template>
      <div class="xin-main">
        <div class="xin-content">
          <business-process ref="business" @btnFlag="btnFlag" @closeBus="closeBus"
                            :itemData="crudData.itemData"></business-process>
        </div>
        <div class="xin-footer" v-if="crudData.btnFlag">
          <el-button icon="el-icon-close" size="small">取消</el-button>
          <el-button icon="el-icon-check" size="small" type="primary" @click="saveFlowData">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </basic-container>
</template>
<script>
import {getPage, getTaskDetail} from "@/api/eventManagement/eventInquiry";
import MaterialInfo from "@/views/eventManagement/components/materialInfo.vue";
import HandlingProcess from "@/views/eventManagement/components/handlingProcess.vue";
import BusinessProcess from "@/views/eventManagement/components/businessProcess.vue";
import {save} from "@/api/system/management";

export default {
  name: "eventInquiry",
  components: {BusinessProcess, HandlingProcess, MaterialInfo},
  data() {
    return {
      crudData: {
        itemTitle: '',
        loading: true,
        btnFlag: true,
        ItemDrawer: false,
        data: [],
        processData: [],
        materialInfoData: [],
        itemData: {},
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        form: {},
        query: {},
      },
      option: {
        height: 'auto',
        tip: false,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        indexLabel: '序号',
        columnBtn: false,
        searchSpan: 8,
        searchMenuSpan: 6,
        labelWidth: 180,
        searchMenuPosition: 'right',
        column: [
          {
            label: "事项名称",
            prop: "taskName",
            search: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请输入事项名称",
              trigger: "blur"
            }],
            display: false,
          },
          {
            label: "事项类型",
            prop: "taskType",
            search: true,
            display: false,
            type: 'select',
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=event_type',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
          },
          {
            label: "承诺办结时限",
            prop: "promiseDay",
            display: false,
          },
          {
            label: "办件类型",
            prop: "projectType",
            type: 'select',
            search: true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=apply_type',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            display: false,
          },
          // {
          //   label: "办理系统",
          //   prop: "projectSystem",
          //   type: 'select',
          //   dicUrl: '',
          //   display: false,
          // },
          {
            label: "环节配置时间",
            prop: "itemUpdateDate",
            display: false,
          },
          {
            label: "实施主体",
            prop: "deptName",
            search: true,
            display: false,
          },
        ],
        group: [
          {
            label: '基本信息',
            prop: 'baseInfo',
            icon: 'el-icon-user-solid',
            column: [
              {
                label: "事项类型",
                prop: "taskType",
                type: 'select',
                dicUrl: '/api/blade-system/dict-biz/dictionary?code=event_type',
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
              },
              {
                label: "基本编码",
                prop: "catalogCode",
              },
              {
                label: "办理项编码",
                prop: "ywcode",
                hide: true,
              },
              {
                label: "行使层级",
                prop: "useLevel",
                hide: true,
                type: 'select',
                dicUrl: '/api/blade-system/dict-biz/dictionary?code=use_level',
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
              },
              {
                label: "办理形式",
                prop: "handleType",
                hide: true,
                type: 'select',
                multiple: true,
                dicUrl: '/api/blade-system/dict-biz/dictionary?code=handle_type',
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
              },
              {
                label: "到办事现场次数",
                prop: "limitSceneNum",
                hide: true,
              },
              {
                label: "特别程序",
                prop: "specialProgram",
                span: 24,
                hide: true,
              },
            ]
          },
          {
            label: '部门信息',
            prop: 'jbxx',
            icon: 'el-icon-s-custom',
            column: [
              {
                label: "实施主体（部门标识）",
                prop: "deptName",
                hide: true,
              },
              {
                label: "实施主体编码",
                prop: "deptCode",
                hide: true,
              },
              {
                label: "实施主体性质",
                prop: "deptType",
                type: 'select',
                dicUrl: '/api/blade-system/dict-biz/dictionary?code=dept_type',
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
              },
              {
                label: "权力来源",
                prop: "itemSource",
                type: 'select',
                dicUrl: '/api/blade-system/dict-biz/dictionary?code=item_source',
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
              },

            ]
          },
          {
            label: '窗口办理',
            prop: 'jbxx',
            icon: 'el-icon-s-platform',
            column: [
              {
                label: "办理地点",
                prop: "transactAddr",
                type: 'textarea',
                hide: true,
                span: 24,
              },
              {
                label: "办理时间",
                prop: "transactTime",
                hide: true,
                span: 24,
              },

            ]
          },
          {
            label: '受理标准',
            prop: 'jbxx',
            icon: 'el-icon-s-management',
            column: [
              {
                label: "服务对象",
                prop: "serveType",
                multiple: true,
                hide: true,
                span: 24,
                type: 'select',
                dicUrl: '/api/blade-system/dict-biz/dictionary?code=serve_type',
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
              },
              {
                label: "受理条件",
                prop: "acceptCondition",
                type: 'textarea',
                hide: true,
                span: 24,
              },
            ]
          },
          {
            label: '办理材料',
            prop: 'materials',
            icon: 'el-icon-upload',
            column: [
              {
                label: '',
                prop: 'materialInfo',
                span: 24,
                labelWidth: 0,
              }
            ]
          },
          {
            label: '办理流程',
            prop: 'handProcess',
            icon: 'el-icon-s-management',
            column: [
              {
                label: '',
                prop: 'process',
                labelWidth: 0,
                span: 24
              }
            ]
          },
          {
            label: '办理时限',
            prop: 'jbxx',
            icon: 'el-icon-s-opportunity',
            column: [
              {
                label: "办件类型",
                prop: "projectType",
                type: 'select',
                multiple: true,
                dicUrl: '/api/blade-system/dict-biz/dictionary?code=apply_type',
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
                hide: true,
                span: 24,
              },
              {
                label: "法定办结时限",
                prop: "anticipateDay",
                hide: true,
              },
              {
                label: "承诺办结时限",
                prop: "promiseDay",
                hide: true,
              },
              {
                label: "法定办结时限说明",
                prop: "anticipateDayExplain",
                type: 'textarea',
                hide: true,
              },
              {
                label: "承诺办结时限说明",
                prop: "promiseDayExplain",
                type: 'textarea',
                hide: true,
              },
            ]
          },
          {
            label: '收费情况',
            prop: 'jbxx',
            icon: 'el-icon-s-ticket',
            column: [
              {
                label: "是否收费",
                prop: "isFee",
                hide: true,
                type: 'select',
                span: 24,
                dicUrl: "/api/blade-system/dict-biz/dictionary?code=yes_no",
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
              },
              {
                label: "收费依据",
                prop: "chargeByLaw",
                span: 24,
                hide: true,
                type: "textarea"
              },

            ]
          },
          {
            label: '法律依据',
            prop: 'jbxx',
            icon: 'el-icon-s-order',
            column: [
              {
                label: "设定依据",
                prop: "byLaw",
                hide: true,
                type: "textarea",
                span: 24
              },
              {
                label: "增补依据",
                prop: "byLawExtend",
                hide: true,
                type: "textarea",
                span: 24
              },
            ]
          },
          {
            label: '咨询投诉',
            prop: 'jbxx',
            icon: 'el-icon-s-marketing',
            column: [
              {
                label: "咨询方式",
                prop: "linkWay",
                hide: true,
                span: 24
              },
              {
                label: "监督投诉方式",
                prop: "superviseWay",
                hide: true,
                type: "textarea",
                span: 24
              },
            ]
          },
        ],
      }
    }
  },
  methods: {
    saveFlowData() {
      this.$refs.business.saveAllData()
    },
    btnFlag(row) {
      this.crudData.btnFlag = row.prop === 'linkConfiguration';
    },
    closeBus() {
      this.onLoad(this.crudData.page)
      this.crudData.ItemDrawer = false
    },
    itemLevel(row) {
      this.crudData.itemData = row
      this.crudData.itemTitle = row.taskName
      this.crudData.ItemDrawer = true
    },
    openFlow(row) {
      window.open(row)
    },
    handView(row) {
      getTaskDetail({rowguid: row.rowguid}).then(res => {
        this.$refs.crud.rowView(res.data.data)
        this.crudData.materialInfoData = res.data.data.materials
        this.crudData.processData = res.data.data.activities
      })
    },
    currentChange(currentPage) {
      this.crudData.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.crudData.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.crudData.page, this.crudData.query);
    },
    onLoad(page, params = {}) {
      this.crudData.loading = true;
      getPage(page.currentPage, page.pageSize, Object.assign(params, this.crudData.query)).then((res) => {
        const data = res.data.data;
        this.crudData.page.total = data.total;
        this.crudData.data = data.records;
        this.crudData.loading = false;
      });
    }
  }
}
</script>
<style scoped lang="scss">
.drawTitle {
  font-size: 18px;
  color: #333;
  font-weight: 700;
}

/deep/ .avue-group__title {
  margin-bottom: 0;
}

.xin-main {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .xin-content {
    padding: 0 20px;
    overflow-y: scroll;
    height: 86%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .xin-footer {
    position: fixed;
    bottom: 5px;
    right: 10px;
  }
}
</style>
